<template>
	<div class="">
		<el-form :inline="true" :model="searchFormData" class="demo-form-inline">
			<el-form-item label="权限名称">
				<el-input size="small" v-model="searchFormData.menuName" placeholder="请输入权限名称"></el-input>
			</el-form-item>
			<el-form-item label="权限类型">
				<el-select v-model="searchFormData.menuType" placeholder="请选择" clearable size="small">
				    <el-option label="目录" value="M"/>
				    <el-option label="菜单" value="C"/>
				    <el-option label="按钮" value="F"/>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button @click="reset" size="small">重置</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="search" size="small">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" size="small" @click="showAddDialog">添加权限</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" size="small" @click="batchRemove">批量删除</el-button>
			</el-form-item>
		</el-form>
		<div>
			<el-table ref="refMenusTable" size="mini" row-key="menuId" default-expand-all 
				:data="tableData" :header-cell-style="{ background: '#FAFAFA', textAlign: 'center' }"
				:cell-style="{ textAlign: 'center' }" max-height="580"
				@select="row_select" @selection-change="selection_change"  @select-all="select_all"
				v-loading="tableLoading">
				<el-table-column type="selection" width="55"> </el-table-column>
				<el-table-column prop="menuName" label="权限名称"> </el-table-column>
				<el-table-column prop="component" label="标识"> </el-table-column>
				<el-table-column label="类型">
					<template slot-scope="scope">
						<span v-if="scope.row.menuType == 'M'">目录</span>
						<span v-if="scope.row.menuType == 'C'">菜单</span>
						<span v-if="scope.row.menuType == 'F'">按钮</span>
					</template>
				</el-table-column>
				<el-table-column prop="path" label="URL"> </el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="text" @click="remove(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		
		<!-- 添加权限dialog -->
		<el-dialog title="添加权限" :visible.sync="adddialogVisible" width="50%">
			<div>
				<el-table ref="refMenusTable2" size="small" row-key="menuId" highlight-current-row default-expand-all
					:data="tableData2" :header-cell-style="{ background: '#FAFAFA', textAlign: 'center' }"
					:cell-style="{ textAlign: 'center' }" 
					@select="row_select2" @selection-change="selection_change2" @select-all="select_all2"
					v-loading="tableLoading">
					<el-table-column type="selection" width="55"> </el-table-column>
					<el-table-column prop="menuName" label="权限名称"> </el-table-column>
					<el-table-column prop="component" label="标识"> </el-table-column>
					<el-table-column label="类型">
						<template slot-scope="scope">
							<span v-if="scope.row.menuType == 'M'">目录</span>
							<span v-if="scope.row.menuType == 'C'">菜单</span>
							<span v-if="scope.row.menuType == 'F'">按钮</span>
						</template>
					</el-table-column>
					<el-table-column prop="path" label="URL"> </el-table-column>
				</el-table>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="adddialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="accredit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		components: {},
		props: {
			'activeRoleId': Number | String
		},
		data() {
			return {
				adddialogVisible: false,
				tableData: [],
				tableData2: [],
				tableLoading: false, //表格加载中
				selection: [], //已授权列表，选中的行
				selection2: [], //添加授权列表，选中的行
				searchFormData: {
					menuName: '',  //权限名称
					menuType: '', //权限类型
				},
				selectAllState: false, //tableData 是否全选
				selectAllState2: false, //tableData2 是否全选
			}
		},
		created() {

		},
		methods: {
			accredit() {
				this.$http({
					url: '/api/system/roleMenu/add',
					method: 'POST',
					data: {
						'menuIds': this.selection2.map(item=>item.menuId),
						'roleId': this.activeRoleId
					}
				}).then(res => {
					console.log(res);
					this.adddialogVisible = false;
					this.load_table_data();
				})
			},
			reset() {
				this.searchFormData = {
					menuName: '',
					menuType: ''
				}
				this.load_table_data()
			},
			load_table_data() { //加载已授权的列表
				this.tableLoading = true;
				this.$http({
					url: '/api/system/roleMenu/list',
					method: 'POST',
					data: {
						...this.searchFormData,
						'roleId': this.activeRoleId
					}
				}).then(res => {
					this.tableData = res.data.data;
					this.tableLoading = false;
				})
			},
			row_select(selection, row) {
				this.$nextTick(()=>{
					if(selection.indexOf(row) > -1) { // 若勾选
						this.check_parent(row) //向上同步
						this.check_children(row) //向下同步
					} else { // 若取消,则向下同步
						this.uncheck_children(row)
					}
				})
			},
			check_parent(row) {
				let parentRow = this.tableData.find(item=>{ //找到父亲
					return item.menuId == row.parentId
				});
				if(parentRow) { //若父亲存在
					this.$refs.refMenusTable.toggleRowSelection(parentRow, true); //选中它
					this.check_parent(parentRow) //继续向上找父亲
				}
			},
			check_children(row) {
				let children = row.children;
				if(children && children.length>0) {
					children.forEach(item=>{
						this.$refs.refMenusTable.toggleRowSelection(item, true); //选中它
						this.check_children(item); //递归选中
					})
				}
			},
			uncheck_children(row){
				let children = row.children;
				if(children && children.length>0) {
					children.forEach(item=>{
						this.$refs.refMenusTable.toggleRowSelection(item, false); //取消它
						this.uncheck_children(item); //递归取消
					})
				}
			},
			selection_change(selection) {
				this.selection = selection;
			},
			select_all(selection) {
				this.selectAllState = !this.selectAllState;
				if(this.selectAllState) {
					//全选
					this.tableData.forEach(row=>{
						this.check_children(row);
					})
				} else {
					//全不选
					this.tableData.forEach(row=>{
						this.uncheck_children(row);
					})
				}
			},
			load_table_data2() { //加载未授权的列表
				this.tableLoading = true;
				this.$http({
					url: '/api/system/roleMenu/unAddedMenuList',
					method: 'POST',
					data: {
						'roleId': this.activeRoleId
					}
				}).then(res => {
					this.tableData2 = res.data.data;
					this.tableLoading = false;
				})
			},
			row_select2(selection, row) {
				this.$nextTick(()=>{
					if(selection.indexOf(row) > -1) { // 若勾选
						this.check_parent2(row) //向上同步
						this.check_children2(row) //向下同步
					} else { // 若取消,则向下同步
						this.uncheck_children2(row)
					}
				})
			},
			check_parent2(row) {
				let parentRow = this.tableData2.find(item=>{ //找到父亲
					return item.menuId == row.parentId
				});
				if(parentRow) { //若父亲存在
					this.$refs.refMenusTable2.toggleRowSelection(parentRow, true); //选中它
					this.check_parent2(parentRow) //继续向上找父亲
				}
			},
			check_children2(row) {
				let children = row.children;
				if(children && children.length>0) {
					children.forEach(item=>{
						this.$refs.refMenusTable2.toggleRowSelection(item, true); //选中它
						this.check_children2(item); //递归选中
					})
				}
			},
			uncheck_children2(row){
				let children = row.children;
				if(children && children.length>0) {
					children.forEach(item=>{
						this.$refs.refMenusTable2.toggleRowSelection(item, false); //取消它
						this.uncheck_children2(item); //递归取消
					})
				}
			},
			selection_change2(selection) {
				this.selection2 = selection;
			},
			select_all2() {
				this.selectAllState2 = !this.selectAllState2;
				if(this.selectAllState2) {
					//全选
					this.tableData2.forEach(row=>{
						this.check_children2(row);
					})
				} else {
					//全不选
					this.tableData2.forEach(row=>{
						this.uncheck_children2(row);
					})
				}
			},
			search() {
				this.load_table_data()
			},
			showAddDialog(){
				this.adddialogVisible = true;
				this.load_table_data2()
			}, 
			remove(row) {
				this.delete(row.roleMenuId)
			},
			batchRemove() {
				let ids = this.selection.map(item=>item.roleMenuId).join(",")
				this.delete(ids)
			},
			delete(ids) {
				this.$confirm('此操作将删除该用户，是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						url: `/api/system/roleMenu/remove/${ids}`,
						method: 'GET'
					}).then(res => {
						console.log(res);
						if(res.data.code == 200) {
							this.load_table_data()
						} else {
							this.$message.error(res.data.msg);
						}
					})
				}).catch(()=>{
					this.$message.info('删除取消')
				})
			}
		},
		watch: {
			activeRoleId(newVal) {
				this.load_table_data();
			}
		}
	}
</script>
<style lang='scss' scoped>
</style>
